<template>
	<div class="search-history">
		<van-cell title="搜索历史">
			<template v-if="isDeleteShow">
				<span @click="$emit('clearHistory')">全部删除</span> &nbsp;&nbsp;
				<span @click="isDeleteShow = false">完成</span>
			</template>
			<van-icon name="delete" v-else @click="isDeleteShow = true" />
		</van-cell>
		<van-cell @click="onHistoryClick(item, index)" :title="item" v-for="(item, index) in searchHistories"
			:key="index">
			<van-icon name="close" v-show="isDeleteShow" />
		</van-cell>
	</div>
</template>

<script>
	export default {
		props: {
			searchHistories: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				isDeleteShow: false,
			}
		},

		methods: {
			onHistoryClick(item, index) {
				if (this.isDeleteShow) {
					this.searchHistories.splice(index, 1)
				} else {
					this.$emit('historySearch', item)
				}
			}
		},
	}
</script>

<style lang="less" scoped>

</style>
